 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">订单详情</div>
      </div>
      <div class="content-con">
        <div class="bank-form">
          <div class="form-item">
            <Row :gutter="24">
              <i-col span="12"
              v-for="(paid,index) in paidData"
              :key='paid.id'>
                <Row style="padding-top: 15px;">
                  <i-col span="8" class="ban-left">
                    {{paid.title}}
                  </i-col>
                  <i-col span="16">
                    <i-input :value.sync="paid.value" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="ban-btn">
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div>
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'paid-order-details',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       paidData: [
         {
           title: '代付订单号',
           value: 'G01202010132338569180026'
         },
         {
           title: '商户单号',
           value: ''
         },
         {
           title: '代付批次号',
           value: '2deacfb2ddf841b7b26dd3e16fdca2c7'
         },
         {
           title: '商户ID',
           value: '20000032'
         },
         {
           title: '代付金额(元)',
           value: '100'
         },
         {
           title: '代付手续费(元)',
           value: '3'
         },
         {
           title: '打款金额(元)',
           value: '100'
         },
         {
           title: '扣减金额(元)',
           value: '103'
         },
         {
           title: '通道ID',
           value: '5'
         },
         {
           title: '账户属性',
           value: '对私'
         },

         {
           title: '账户名',
           value: '23'
         },
         {
           title: '账户号(银行卡号)',
           value: '23'
         },
         {
           title: '转账订单号',
           value: 'T01202010132338569180026'
         },
         {
           title: '状态',
           value: '成功'
         },
         {
           title: '开户行所在省',
           value: ''
         },
         {
           title: '开户行所在市',
           value: ''
         },
         {
           title: '出款卡银行名称',
           value: '天地银行'
         },
         {
           title: '出款卡银行开户名',
           value: '天人'
         },
         {
           title: '出款卡银行卡号',
           value: '4211260000'
         },
         {
           title: '银行代码',
           value: ''
         },
         {
           title: '客户端IP',
           value: '180.109.180.161'
         },
         {
           title: '设备',
           value: 'web'
         },
         {
           title: '通知地址',
           value: ''
         },
         {
           title: '备注',
           value: '代付:100元'
         },
         {
           title: '创建时间',
           value: '2020-10-13 23:38:56'
         },
         {
           title: '更新时间',
           value: '2020-10-13 23:39:13'
         }
       ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'paid_order'})
     }
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 85px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-input{
       border-radius: 0 2px 2px 0;
     }
     .content-con{
       margin: 15px 15px 0px 15px;
       .bank-form{
         .form-item{
           .ban-left{
             padding: 8px 15px;
             height: 36px;
             line-height: 20px;
             border-width: 1px;
             border-style: solid;
             border-radius: 2px 0 0 2px;
             text-align: center;
             background-color: #FBFBFB;
             border: 1px solid #dcdee2;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             box-sizing: border-box;
            }
          }
        }
        .ban-btn{
          padding:18px 0px 12px 110px;
          .save{
            background-color: rgb(0, 150, 136);
            color: white;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            margin-right: 15px;
          }
        }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
